<template>
  <hr />
  <h1>数据的绑定</h1>

  <div>
    <input type="text" v-model="state.num1" />+
    <input type="text" v-model="state.num2" />=
    <span>{{ state.result }}</span>
  </div>

  <hr />
  <h1>调用方法的使用-methods</h1>
  <div>
    <span> {{ state.A }} </span>+ <span>{{ state.B }} </span>=
    <span>{{ state.sum }}</span>
    <button @click="addMethods">计算点击事件</button>
  </div>
  <hr />
  <h1>父子组件传递参数</h1>
  <hr />
  <button @click="routerGo">跳转路由</button>
</template>

<script>
import { onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
// 计算属性的引入
export default {
  setup() {
    // 跳转路由----》第一步
    const router = useRouter();
    
    // 挂载的生命钩子
    onMounted(() => {
      state.result = state.num1 - 0 + (state.num2 - 0);
    });
    // 定义参数
    const state = reactive({
      num1: 1,
      num2: 5,
      result: computed(() => state.num1 - 0 + (state.num2 - 0)),
      A: 99,
      B: 22,
      sum: "?",
    });
    // 方法的使用
    function addMethods() {
      state.sum = state.A - 0 + (state.B - 0);
    }
    // 跳转路由
    // 跳转路由----》第二步 定义路由及其跳转参数
    function routerGo() {
      router.push({ path: `/baba/${1}` });
    }

    // 返回出去  参数和方法都返回出去
    return {
      state,
      addMethods,
      routerGo,
    };
  },
};
</script>
